<section>
    <div class="modal-header">
        <h3 class="modal-title" ng-show="operation === 'ADD'"><small>Create topic:</small> {{groupName}}.{{topic.shortName}}</h3>
        <h3 class="modal-title" ng-show="operation === 'EDIT'"><small>Edit topic:</small> {{topic.name}}</h3>
    </div>
    <div class="modal-body">
        <form name="topicForm" class="form-horizontal" role="form">
            <div ng-hide="!authEnabled.headers || isAuthorized" class="form-group {{topicForm.rootPassword.$valid ? '' : 'has-error'}}">
                <label for="rootPassword" class="col-md-3 control-label">Root password</label>
                <div class="col-md-9">
                    <input class="form-control" type="password" ng-required="!isAuthorized && authEnabled.headers" id="rootPassword" name="rootPassword" placeholder="root password" ng-model="rootPassword"/>
                </div>
            </div>
            <div class="form-group {{topicForm.topicName.$valid ? '' : 'has-error'}}" ng-show="operation === 'ADD'">
                <label for="topicName" class="col-md-3 control-label">Name</label>
                <div class="col-md-9">
                    <input class="form-control" id="topicName" required name="topicName" placeholder="name of topic, without group prefix" ng-model="topic.shortName" ng-pattern="/^[a-zA-Z0-9_-]+$/"/>
                </div>
            </div>
            <div class="form-group {{topicForm.topicDescription.$valid ? '' : 'has-error'}}">
                <label for="topicDescription" class="col-md-3 control-label">Description</label>
                <div class="col-md-9">
                    <input class="form-control" required id="topicDescription" name="topicDescription" placeholder="what type of messages you publish?" ng-model="topic.description"/>
                </div>
            </div>

            <owner-selector form="topicForm" source="topic.owner.source" owner="topic.owner.id"></owner-selector>

            <div class="ng-hide" ng-show="config.authEnabled">
                <hr />
                <div class="form-group">
                    <label for="topicAuthEnabled" class="col-md-3 control-label">Authorisation enabled</label>
                    <div class="col-md-9">
                        <input type="checkbox" id="topicAuthEnabled" name="topicAuthEnabled" ng-model="topic.auth.enabled" />
                    </div>
                </div>

                <div class="form-group {{topicForm.topicPublishers.$valid ? '' : 'has-error'}}">
                    <label for="topicPublishers" class="col-md-3 control-label">Authorised publishers</label>
                    <div class="col-md-9">
                        <input ng-model="topic.auth.publishers" ng-list=", " class="form-control" ng-required="topic.auth.enabled" id="topicPublishers" name="topicPublishers" placeholder="who is allowed to publish on this topic? (comma separated)"/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="topicUnauthenticatedAccessEnabled" class="col-md-3 control-label">Allow unauthenticated access</label>
                    <div class="col-md-9">
                        <input type="checkbox" id="topicUnauthenticatedAccessEnabled" name="topicUnauthenticatedAccessEnabled" ng-model="topic.auth.unauthenticatedAccessEnabled"/>
                    </div>
                </div>
                <hr />
            </div>

            <div class="form-group">
                <label for="topicSubscribingRestricted" class="col-md-3 control-label">Restrict subscribing</label>
                <div class="col-md-9">
                    <input type="checkbox" id="topicSubscribingRestricted" name="topicSubscribingRestricted" ng-model="topic.subscribingRestricted"/>
                </div>
            </div>
            <hr />
            <div class="form-group {{topicForm.topicRetention.$valid ? '' : 'has-error'}}">
                <label for="topicRetention" class="col-md-3 control-label">Retention time</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="0" max="7" required class="form-control" id="topicRetention" name="topicRetention" ng-model="topic.retentionTime.duration" placeholder="how long should we keep them for subscribers?"/>
                        <span class="input-group-addon">days</span>
                        <span class="input-group-addon helpme-addon" uib-tooltip='For how many days message is available for subscribers after being published.'>?</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="topicAck" class="col-md-3 control-label">Kafka ACK Level</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <select id="topicAck" class="form-control" ng-model="topic.ack">
                            <option>LEADER</option>
                            <option>ALL</option>
                        </select>
                        <span class="input-group-addon helpme-addon" uib-tooltip='Specifies the strength of guarantees that acknowledged message was indeed persisted. In "Leader" mode ACK is required only from topic leader, which is fast and gives 99.99999% guarantee. It might be not enough when cluster is unstable. "All" mode means message needs to be saved on all replicas before sending ACK, which is quite slow but gives 100% guarantee that message has been persisted.'>?</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="trackingEnabled" class="col-md-3 control-label">Tracking enabled</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="checkbox" id="trackingEnabled" name="trackingEnabled" ng-model="topic.trackingEnabled"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="topicType" class="col-md-3 control-label">Content type</label>
                <div class="col-md-9">
                    <select id="topicType" class="form-control" ng-disabled="operation === 'EDIT'" ng-model="topic.contentType">
                        <option ng-repeat="contentType in config.contentTypes" value="{{contentType.value}}">{{contentType.label}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group {{topicForm.topicMaxMessageSize.$valid ? '' : 'has-error'}}">
                <label for="topicMaxMessageSize" class="col-md-3 control-label">Max message size</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" required class="form-control" id="topicMaxMessageSize" name="topicMaxMessageSize" ng-model="topic.maxMessageSize" placeholder="what is the message size limit for this topic?"/>
                        <span class="input-group-addon">bytes</span>
                    </div>
                </div>
            </div>

            <hr />
            <div class="form-group {{topicForm.topicStoreOffline.$valid ? '' : 'has-error'}}">
                <label for="topicStoreOffline" class="col-md-3 control-label">Store offline</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <select id="topicStoreOffline" name="topicStoreOffline" ng-model="topic.offlineStorage.enabled" class="form-control"
                            ng-options="(item ? 'yes':'no') for item in [true, false]"
                            required unknown-value-required/>
                        <span class="input-group-addon helpme-addon" uib-tooltip='Should data from this topic be stored in offline storage (e.g. HDFS).'>?</span>
                    </div>
                </div>
            </div>
            <div class="form-group {{topicForm.topicOfflineRetention.$valid ? '' : 'has-error'}}" ng-show="topic.offlineStorage.enabled && !topic.offlineStorage.retentionTime.infinite">
                <label for="topicOfflineRetention" class="col-md-3 control-label">Offline retention time</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" ng-min="topic.offlineStorage.enabled && !topic.offlineStorage.retentionTime.infinite ? 1 : false" max="120"
                               ng-required="topic.offlineStorage.enabled && !topic.offlineStorage.retentionTime.infinite" class="form-control"
                               id="topicOfflineRetention" name="topicOfflineRetention" ng-model="topic.offlineStorage.retentionTime.duration"
                               placeholder="how long should it be stored in offline storage?"/>
                        <span class="input-group-addon">days</span>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-show="topic.offlineStorage.enabled">
                <label for="topicOfflineRetentionInfinity" class="col-md-3 control-label">Keep forever</label>
                <div class="col-md-9">
                    <input type="checkbox" id="topicOfflineRetentionInfinity" name="topicOfflineRetentionInfinity" ng-model="topic.offlineStorage.retentionTime.infinite"/>
                </div>
            </div>

            <hr />
            <div class="form-group {{topicForm.messageSchema.$valid ? '' : 'has-error'}}" ng-show="topic.contentType === 'AVRO'">
                <label for="messageSchema" class="col-md-3 control-label">
                    <a href="http://hermes-pubsub.rtfd.org/en/latest/user/publishing-avro/" target="_blank">AVRO schema</a>
                </label>
                <div class="col-md-9">
                    <div class="alert alert-info">
                        Schema definition <b>must contain</b> an additional field for Hermes internal use:<br>
                        <pre>
{
    "name": "__metadata", "default": null,
    "type": ["null", {"type": "map", "values": "string"}],
    "doc": "Field used in Hermes internals to propagate metadata"
}
                        </pre>
                    </div>
                    <textarea class="form-control" id="messageSchema" ng-required="topic.contentType === 'AVRO'"
                              name="messageSchema" placeholder="Message schema"
                              ng-model="messageSchema" rows="20"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-disabled="topicForm.$invalid" ng-click="save()">Save</button>
        <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
    </div>
</section>
